<!DOCTYPE html>
<!-- saved from url=(0038)https://www.jianshu.com/p/c8acb5470280 -->
<html><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

  <!-- Start of Baidu Transcode -->
  <meta http-equiv="Cache-Control" content="no-siteapp">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta name="applicable-device" content="pc,mobile">
  <meta name="MobileOptimized" content="width">
  <meta name="HandheldFriendly" content="true">
  <meta name="mobile-agent" content="format=html5;url=https://www.jianshu.com/p/c8acb5470280">
  <!-- End of Baidu Transcode -->

    <meta name="description" content="1.盒子模型 1.1盒子模型的传参 1.2 PADDING 2.HTML标签的分类 2.1块标签 h1,p,div,ul,li,dl,dt,dd都是块标签特点：1、独占一行 2、能设置width，height 2.2内联标签 a,span,em,strong//特点1.并排显示2.不能设置width,height3.不能设置margin-top,margin-bottom 2.3内联块 //...">

  <meta name="360-site-verification" content="604a14b53c6b871206001285921e81d8">
  <meta property="wb:webmaster" content="294ec9de89e7fadb">
  <meta property="qc:admins" content="104102651453316562112116375">
  <meta property="qc:admins" content="11635613706305617">
  <meta property="qc:admins" content="1163561616621163056375">
  <meta name="google-site-verification" content="cV4-qkUJZR6gmFeajx_UyPe47GW9vY6cnCrYtCHYNh4">
  <meta name="google-site-verification" content="HF7lfF8YEGs1qtCE-kPml8Z469e2RHhGajy6JPVy5XI">
  <meta http-equiv="mobile-agent" content="format=html5; url=https://www.jianshu.com/p/c8acb5470280">

  <!-- Apple -->
  <meta name="apple-mobile-web-app-title" content="简书">

    <!--  Meta for Smart App Banner -->
  <meta name="apple-itunes-app" content="app-id=888237539, app-argument=jianshu://notes/30725888">
  <!-- End -->

  <!--  Meta for Twitter Card -->
  <meta content="summary" property="twitter:card">
  <meta content="@jianshucom" property="twitter:site">
  <meta content="day03" property="twitter:title">
  <meta content="1.盒子模型 1.1盒子模型的传参 1.2 PADDING 2.HTML标签的分类 2.1块标签 h1,p,div,ul,li,dl,dt,dd都是块标签特点：1、独占一行 ..." property="twitter:description">
  <meta content="https://www.jianshu.com/p/c8acb5470280" property="twitter:url">
  <!-- End -->

  <!--  Meta for OpenGraph -->
  <meta property="fb:app_id" content="865829053512461">
  <meta property="og:site_name" content="简书">
  <meta property="og:title" content="day03">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://www.jianshu.com/p/c8acb5470280">
  <meta property="og:description" content="1.盒子模型 1.1盒子模型的传参 1.2 PADDING 2.HTML标签的分类 2.1块标签 h1,p,div,ul,li,dl,dt,dd都是块标签特点：1、独占一行 2、能设置width...">
  <!-- End -->

  <!--  Meta for Facebook Applinks -->
  <meta property="al:ios:url" content="jianshu://notes/30725888">
  <meta property="al:ios:app_store_id" content="888237539">
  <meta property="al:ios:app_name" content="简书">

  <meta property="al:android:url" content="jianshu://notes/30725888">
  <meta property="al:android:package" content="com.jianshu.haruki">
  <meta property="al:android:app_name" content="简书">
  <!-- End -->


    <title>day03 - 简书</title>

  <meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="gqjH5iBiRYZbmM+uWNxe8b5An3KkuEl79UfQlDJF9lF6OxPQjrexpmwnbHDU8O8an9/NmuTyQJwv/b0uwdoP0A==">

  <link rel="stylesheet" media="all" href="./day03 - 简书_files/web-2b26d78a4d3c053b7b1c.css">
  
  <link rel="stylesheet" media="all" href="./day03 - 简书_files/entry-5428969bbd50326930bb.css">

  <link href="https://cdn2.jianshu.io/assets/favicons/favicon-e743bfb1821442341c3ab15bdbe804f7ad97676bd07a770ccc9483473aa76f06.ico" rel="shortcut icon" type="image/x-icon">
      <link rel="apple-touch-icon-precomposed" href="https://cdn2.jianshu.io/assets/apple-touch-icons/57-a6f1f1ee62ace44f6dc2f6a08575abd3c3b163288881c78dd8d75247682a4b27.png" sizes="57x57">
      <link rel="apple-touch-icon-precomposed" href="https://cdn2.jianshu.io/assets/apple-touch-icons/72-fb9834bcfce738fd7b9c5e31363e79443e09a81a8e931170b58bc815387c1562.png" sizes="72x72">
      <link rel="apple-touch-icon-precomposed" href="https://cdn2.jianshu.io/assets/apple-touch-icons/76-49d88e539ff2489475d603994988d871219141ecaa0b1a7a9a1914f4fe3182d6.png" sizes="76x76">
      <link rel="apple-touch-icon-precomposed" href="https://cdn2.jianshu.io/assets/apple-touch-icons/114-24252fe693524ed3a9d0905e49bff3cbd0228f25a320aa09053c2ebb4955de97.png" sizes="114x114">
      <link rel="apple-touch-icon-precomposed" href="https://cdn2.jianshu.io/assets/apple-touch-icons/120-1bb7371f5e87f93ce780a5f1a05ff1b176828ee0d1d130e768575918a2e05834.png" sizes="120x120">
      <link rel="apple-touch-icon-precomposed" href="https://cdn2.jianshu.io/assets/apple-touch-icons/152-bf209460fc1c17bfd3e2b84c8e758bc11ca3e570fd411c3bbd84149b97453b99.png" sizes="152x152">

  <!-- Start of 访问统计 -->
    <script src="./day03 - 简书_files/push.js.下载"></script><script src="./day03 - 简书_files/hm.js.下载"></script><script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?0c0e9d9b1e7d617b3e6842e85b9fb068";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>

  <!-- End of 访问统计 -->
<style type="text/css">fieldset[disabled] .multiselect {
  pointer-events: none;
}

.multiselect__spinner {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 48px;
  height: 35px;
  background: #fff;
  display: block;
}

.multiselect__spinner:after,
.multiselect__spinner:before {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  border-color: #41b883 transparent transparent;
  border-style: solid;
  border-width: 2px;
  box-shadow: 0 0 0 1px transparent;
}

.multiselect__spinner:before {
  animation: a 2.4s cubic-bezier(.41,.26,.2,.62);
  animation-iteration-count: infinite;
}

.multiselect__spinner:after {
  animation: a 2.4s cubic-bezier(.51,.09,.21,.8);
  animation-iteration-count: infinite;
}

.multiselect__loading-enter-active,
.multiselect__loading-leave-active {
  transition: opacity .4s ease-in-out;
  opacity: 1;
}

.multiselect__loading-enter,
.multiselect__loading-leave-active {
  opacity: 0;
}

.multiselect,
.multiselect__input,
.multiselect__single {
  font-family: inherit;
  font-size: 14px;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

.multiselect {
  box-sizing: content-box;
  display: block;
  position: relative;
  width: 100%;
  min-height: 40px;
  text-align: left;
  color: #35495e;
}

.multiselect * {
  box-sizing: border-box;
}

.multiselect:focus {
  outline: none;
}

.multiselect--disabled {
  opacity: .6;
}

.multiselect--active {
  z-index: 1;
}

.multiselect--active:not(.multiselect--above) .multiselect__current,
.multiselect--active:not(.multiselect--above) .multiselect__input,
.multiselect--active:not(.multiselect--above) .multiselect__tags {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.multiselect--active .multiselect__select {
  transform: rotate(180deg);
}

.multiselect--above.multiselect--active .multiselect__current,
.multiselect--above.multiselect--active .multiselect__input,
.multiselect--above.multiselect--active .multiselect__tags {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.multiselect__input,
.multiselect__single {
  position: relative;
  display: inline-block;
  min-height: 20px;
  line-height: 20px;
  border: none;
  border-radius: 5px;
  background: #fff;
  padding: 0 0 0 5px;
  width: 100%;
  transition: border .1s ease;
  box-sizing: border-box;
  margin-bottom: 8px;
  vertical-align: top;
}

.multiselect__tag~.multiselect__input,
.multiselect__tag~.multiselect__single {
  width: auto;
}

.multiselect__input:hover,
.multiselect__single:hover {
  border-color: #cfcfcf;
}

.multiselect__input:focus,
.multiselect__single:focus {
  border-color: #a8a8a8;
  outline: none;
}

.multiselect__single {
  padding-left: 6px;
  margin-bottom: 8px;
}

.multiselect__tags-wrap {
  display: inline;
}

.multiselect__tags {
  min-height: 40px;
  display: block;
  padding: 8px 40px 0 8px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  background: #fff;
}

.multiselect__tag {
  position: relative;
  display: inline-block;
  padding: 4px 26px 4px 10px;
  border-radius: 5px;
  margin-right: 10px;
  color: #fff;
  line-height: 1;
  background: #41b883;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
}

.multiselect__tag-icon {
  cursor: pointer;
  margin-left: 7px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  font-weight: 700;
  font-style: normal;
  width: 22px;
  text-align: center;
  line-height: 22px;
  transition: all .2s ease;
  border-radius: 5px;
}

.multiselect__tag-icon:after {
  content: "\D7";
  color: #266d4d;
  font-size: 14px;
}

.multiselect__tag-icon:focus,
.multiselect__tag-icon:hover {
  background: #369a6e;
}

.multiselect__tag-icon:focus:after,
.multiselect__tag-icon:hover:after {
  color: #fff;
}

.multiselect__current {
  min-height: 40px;
  overflow: hidden;
  padding: 8px 12px 0;
  padding-right: 30px;
  white-space: nowrap;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
}

.multiselect__current,
.multiselect__select {
  line-height: 16px;
  box-sizing: border-box;
  display: block;
  margin: 0;
  text-decoration: none;
  cursor: pointer;
}

.multiselect__select {
  position: absolute;
  width: 40px;
  height: 38px;
  right: 1px;
  top: 1px;
  padding: 4px 8px;
  text-align: center;
  transition: transform .2s ease;
}

.multiselect__select:before {
  position: relative;
  right: 0;
  top: 65%;
  color: #999;
  margin-top: 4px;
  border-style: solid;
  border-width: 5px 5px 0;
  border-color: #999 transparent transparent;
  content: "";
}

.multiselect__placeholder {
  color: #adadad;
  display: inline-block;
  margin-bottom: 10px;
  padding-top: 2px;
}

.multiselect--active .multiselect__placeholder {
  display: none;
}

.multiselect__content-wrapper {
  position: absolute;
  display: block;
  background: #fff;
  width: 100%;
  max-height: 240px;
  overflow: auto;
  border: 1px solid #e8e8e8;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  z-index: 1;
  -webkit-overflow-scrolling: touch;
}

.multiselect__content {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  min-width: 100%;
  vertical-align: top;
}

.multiselect--above .multiselect__content-wrapper {
  bottom: 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: none;
  border-top: 1px solid #e8e8e8;
}

.multiselect__content::webkit-scrollbar {
  display: none;
}

.multiselect__element {
  display: block;
}

.multiselect__option {
  display: block;
  padding: 12px;
  min-height: 40px;
  line-height: 16px;
  text-decoration: none;
  text-transform: none;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.multiselect__option:after {
  top: 0;
  right: 0;
  position: absolute;
  line-height: 40px;
  padding-right: 12px;
  padding-left: 20px;
}

.multiselect__option--highlight {
  background: #41b883;
  outline: none;
  color: #fff;
}

.multiselect__option--highlight:after {
  content: attr(data-select);
  background: #41b883;
  color: #fff;
}

.multiselect__option--selected {
  background: #f3f3f3;
  color: #35495e;
  font-weight: 700;
}

.multiselect__option--selected:after {
  content: attr(data-selected);
  color: silver;
}

.multiselect__option--selected.multiselect__option--highlight {
  background: #ff6a6a;
  color: #fff;
}

.multiselect__option--selected.multiselect__option--highlight:after {
  background: #ff6a6a;
  content: attr(data-deselect);
  color: #fff;
}

.multiselect--disabled {
  background: #ededed;
  pointer-events: none;
}

.multiselect--disabled .multiselect__current,
.multiselect--disabled .multiselect__select,
.multiselect__option--disabled {
  background: #ededed;
  color: #a6a6a6;
}

.multiselect__option--disabled {
  cursor: text;
  pointer-events: none;
}

.multiselect__option--disabled.multiselect__option--highlight {
  background: #dedede!important;
}

.multiselect-enter-active,
.multiselect-leave-active {
  transition: all .15s ease;
}

.multiselect-enter,
.multiselect-leave-active {
  opacity: 0;
}

.multiselect__strong {
  margin-bottom: 8px;
  line-height: 20px;
  display: inline-block;
  vertical-align: top;
}

[dir=rtl] .multiselect {
  text-align: right;
}

[dir=rtl] .multiselect__select {
  right: auto;
  left: 1px;
}

[dir=rtl] .multiselect__tags {
  padding: 8px 8px 0 40px;
}

[dir=rtl] .multiselect__content {
  text-align: right;
}

[dir=rtl] .multiselect__option:after {
  right: auto;
  left: 0;
}

[dir=rtl] .multiselect__clear {
  right: auto;
  left: 12px;
}

[dir=rtl] .multiselect__spinner {
  right: auto;
  left: 1px;
}

@keyframes a {
  0% {
    transform: rotate(0);
  }

  to {
    transform: rotate(2turn);
  }
}</style><style type="text/css">@font-face {
  font-family: 'KaTeX_AMS';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_AMS-Regular-3d8245dcb4489694a6a263b05c1cca01.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_AMS-Regular-ac1d46d953d403677171697581a284d2.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_AMS-Regular-c67be87adba7d31c013be127b936233d.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Caligraphic';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold-970d3e76493b82fccf21ad5888ddee77.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold-445f96a387df0d13ded71f27c608516d.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold-3f61a84d76e80396489d32bc9dd8d444.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Caligraphic';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular-0ef0f2e356a2e1c457b6585d34edae77.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular-74f6918c7d2b768ffd32048102bc0172.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular-c3bc8fcec0e85a50cabf71e4e8074991.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Fraktur';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold-950649ba5e5cfd37cdad74095411d350.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold-1aca7ef7f976fb54a207ffc8aa180e38.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold-e11e6bf02fc41279a540d3655abf3b07.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Fraktur';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular-135ccd74931753318f6f52f3fce19018.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular-c5b430bfcb3e5423b77401afcdb69b66.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular-a9509497466d16e6b7265a223ea39093.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Main';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Bold-82bce349c8ff0927380b5177e9258ad0.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Bold-29d4b276c622ff1d1376d9afcbd2f25a.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Bold-db576c7d5d6eb6ebefc9b334f4140d42.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Main';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic-13900e552dbf51aead905f897043226c.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic-3f3be43bbdd58a4a86c8eddd3d39a26a.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic-cec43f729e0e6810c3433f6020ec676e.ttf) format('truetype');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'KaTeX_Main';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Italic-b488f60f79c9d1f533def644385d8219.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Italic-f8a754484e776e94b6116dfbcb1761a7.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Italic-85b3329fdb41fadfb0fdc01ec5290b2f.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'KaTeX_Main';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Regular-999cd6bac6e8118065ac500d4f133c63.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Regular-485696cf1d821baac6ae06c42e09faef.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Main-Regular-f4fe6dca4a5f5520ae0caab31848aae3.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Math';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Math-Italic-7a31741a44e58952cb4b8a763c206fcd.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Math-Italic-8eb56b3ff5b141cd3732a24e65c2b339.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Math-Italic-10740d7488d690a743339650103f1cb3.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold-0d0f967a34b828083a11bb264e578c32.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold-99bd87431ac7ef8f27591f72d7812509.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold-771a1f955e7ff2106402b58d1e8a1ad2.ttf) format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic-b1ac79b9b69c954bbeb8fc02500832e0.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic-9c3f03ec809c6f298d716cbda8260fcb.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic-cb729d47fbd26ff0ae62bb840085e5b5.ttf) format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'KaTeX_SansSerif';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular-23f1730fda70ec6ec6aa789979890cba.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular-fc90839714a9e877682309c3daf7493e.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular-43b0cb92c2405f175772931ccd68002e.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Script';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Script-Regular-ae1fad1f4d1c227c9d567da8ea9f988c.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Script-Regular-60febfa114c5e32f0ce73050476aa39f.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Script-Regular-e9169ca7b32608b6235ec9ffff742a71.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Size1';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size1-Regular-fda0824e8cfb676664ad063c367cfce3.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size1-Regular-1d6cf6b89f694dc76e13ecc4e8214dd2.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size1-Regular-f2e296ef7cef0f6f16912e5d171929b2.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Size2';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size2-Regular-a7a0eb93afb696cb9b4efb87e6cd45a3.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size2-Regular-f48e83b7bcaa68a86a78e8edfee1a04e.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size2-Regular-0767ede65042583bcc06f09055f4d7ca.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Size3';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size3-Regular-397bd6872be7adff4f000c49fa85a9c3.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size3-Regular-0387ab387ace32f15b43c3a4a39f187f.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size3-Regular-882f723427a0986846fe786bd8d6f6c7.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Size4';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size4-Regular-3c14ed11dd8eea981c93bf283193856d.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size4-Regular-726db3bd435c8a6e45e44741dae67263.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Size4-Regular-27901d5ce93d8971c416d9123fedb911.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KaTeX_Typewriter';
  src: url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular-895baecfbf4ef298fdfe943fb117c15e.woff2) format('woff2'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular-696705de367f02534e8abb38b55af067.woff) format('woff'), url(//cdn2.jianshu.io/assets/_/_/_/_/shared/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular-6374f53e08c02d7b9ec594e2fb0c5fe8.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
}

.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
}

.katex-display > .katex {
  display: inline-block;
  text-align: initial;
}

.katex {
  font: normal 1.21em KaTeX_Main, Times New Roman, serif;
  line-height: 1.2;
  white-space: nowrap;
  text-indent: 0;
  text-rendering: auto;
}

.katex * {
  -ms-high-contrast-adjust: none !important;
}

.katex .katex-html {
  display: inline-block;
}

.katex .katex-mathml {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.katex .base {
  position: relative;
  display: inline-block;
}

.katex .strut {
  display: inline-block;
}

.katex .textbf {
  font-weight: bold;
}

.katex .textit {
  font-style: italic;
}

.katex .textrm {
  font-family: KaTeX_Main;
}

.katex .textsf {
  font-family: KaTeX_SansSerif;
}

.katex .texttt {
  font-family: KaTeX_Typewriter;
}

.katex .mathit {
  font-family: KaTeX_Math;
  font-style: italic;
}

.katex .mathrm {
  font-style: normal;
}

.katex .mathbf {
  font-family: KaTeX_Main;
  font-weight: bold;
}

.katex .boldsymbol {
  font-family: KaTeX_Math;
  font-weight: bold;
  font-style: italic;
}

.katex .amsrm {
  font-family: KaTeX_AMS;
}

.katex .mathbb {
  font-family: KaTeX_AMS;
}

.katex .mathcal {
  font-family: KaTeX_Caligraphic;
}

.katex .mathfrak {
  font-family: KaTeX_Fraktur;
}

.katex .mathtt {
  font-family: KaTeX_Typewriter;
}

.katex .mathscr {
  font-family: KaTeX_Script;
}

.katex .mathsf {
  font-family: KaTeX_SansSerif;
}

.katex .mainit {
  font-family: KaTeX_Main;
  font-style: italic;
}

.katex .mainrm {
  font-family: KaTeX_Main;
  font-style: normal;
}

.katex .vlist-t {
  display: inline-table;
  table-layout: fixed;
}

.katex .vlist-r {
  display: table-row;
}

.katex .vlist {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
}

.katex .vlist > span {
  display: block;
  height: 0;
  position: relative;
}

.katex .vlist > span > span {
  display: inline-block;
}

.katex .vlist > span > .pstrut {
  overflow: hidden;
  width: 0;
}

.katex .vlist-t2 {
  margin-right: -2px;
}

.katex .vlist-s {
  display: table-cell;
  vertical-align: bottom;
  font-size: 1px;
  width: 2px;
}

.katex .msupsub {
  text-align: left;
}

.katex .mfrac > span > span {
  text-align: center;
}

.katex .mfrac .frac-line {
  display: inline-block;
  width: 100%;
}

.katex .mspace {
  display: inline-block;
}

.katex .mspace.negativethinspace {
  margin-left: -0.16667em;
}

.katex .mspace.muspace {
  width: 0.055556em;
}

.katex .mspace.thinspace {
  width: 0.16667em;
}

.katex .mspace.negativemediumspace {
  margin-left: -0.22222em;
}

.katex .mspace.mediumspace {
  width: 0.22222em;
}

.katex .mspace.thickspace {
  width: 0.27778em;
}

.katex .mspace.sixmuspace {
  width: 0.333333em;
}

.katex .mspace.eightmuspace {
  width: 0.444444em;
}

.katex .mspace.enspace {
  width: 0.5em;
}

.katex .mspace.twelvemuspace {
  width: 0.666667em;
}

.katex .mspace.quad {
  width: 1em;
}

.katex .mspace.qquad {
  width: 2em;
}

.katex .llap,
.katex .rlap,
.katex .clap {
  width: 0;
  position: relative;
}

.katex .llap > .inner,
.katex .rlap > .inner,
.katex .clap > .inner {
  position: absolute;
}

.katex .llap > .fix,
.katex .rlap > .fix,
.katex .clap > .fix {
  display: inline-block;
}

.katex .llap > .inner {
  right: 0;
}

.katex .rlap > .inner,
.katex .clap > .inner {
  left: 0;
}

.katex .clap > .inner > span {
  margin-left: -50%;
  margin-right: 50%;
}

.katex .rule {
  display: inline-block;
  border: solid 0;
  position: relative;
}

.katex .overline .overline-line,
.katex .underline .underline-line {
  display: inline-block;
  width: 100%;
}

.katex .sqrt > .root {
  margin-left: 0.27777778em;
  margin-right: -0.55555556em;
}

.katex .sizing,
.katex .fontsize-ensurer {
  display: inline-block;
}

.katex .sizing.reset-size1.size1,
.katex .fontsize-ensurer.reset-size1.size1 {
  font-size: 1em;
}

.katex .sizing.reset-size1.size2,
.katex .fontsize-ensurer.reset-size1.size2 {
  font-size: 1.2em;
}

.katex .sizing.reset-size1.size3,
.katex .fontsize-ensurer.reset-size1.size3 {
  font-size: 1.4em;
}

.katex .sizing.reset-size1.size4,
.katex .fontsize-ensurer.reset-size1.size4 {
  font-size: 1.6em;
}

.katex .sizing.reset-size1.size5,
.katex .fontsize-ensurer.reset-size1.size5 {
  font-size: 1.8em;
}

.katex .sizing.reset-size1.size6,
.katex .fontsize-ensurer.reset-size1.size6 {
  font-size: 2em;
}

.katex .sizing.reset-size1.size7,
.katex .fontsize-ensurer.reset-size1.size7 {
  font-size: 2.4em;
}

.katex .sizing.reset-size1.size8,
.katex .fontsize-ensurer.reset-size1.size8 {
  font-size: 2.88em;
}

.katex .sizing.reset-size1.size9,
.katex .fontsize-ensurer.reset-size1.size9 {
  font-size: 3.456em;
}

.katex .sizing.reset-size1.size10,
.katex .fontsize-ensurer.reset-size1.size10 {
  font-size: 4.148em;
}

.katex .sizing.reset-size1.size11,
.katex .fontsize-ensurer.reset-size1.size11 {
  font-size: 4.976em;
}

.katex .sizing.reset-size2.size1,
.katex .fontsize-ensurer.reset-size2.size1 {
  font-size: 0.83333333em;
}

.katex .sizing.reset-size2.size2,
.katex .fontsize-ensurer.reset-size2.size2 {
  font-size: 1em;
}

.katex .sizing.reset-size2.size3,
.katex .fontsize-ensurer.reset-size2.size3 {
  font-size: 1.16666667em;
}

.katex .sizing.reset-size2.size4,
.katex .fontsize-ensurer.reset-size2.size4 {
  font-size: 1.33333333em;
}

.katex .sizing.reset-size2.size5,
.katex .fontsize-ensurer.reset-size2.size5 {
  font-size: 1.5em;
}

.katex .sizing.reset-size2.size6,
.katex .fontsize-ensurer.reset-size2.size6 {
  font-size: 1.66666667em;
}

.katex .sizing.reset-size2.size7,
.katex .fontsize-ensurer.reset-size2.size7 {
  font-size: 2em;
}

.katex .sizing.reset-size2.size8,
.katex .fontsize-ensurer.reset-size2.size8 {
  font-size: 2.4em;
}

.katex .sizing.reset-size2.size9,
.katex .fontsize-ensurer.reset-size2.size9 {
  font-size: 2.88em;
}

.katex .sizing.reset-size2.size10,
.katex .fontsize-ensurer.reset-size2.size10 {
  font-size: 3.45666667em;
}

.katex .sizing.reset-size2.size11,
.katex .fontsize-ensurer.reset-size2.size11 {
  font-size: 4.14666667em;
}

.katex .sizing.reset-size3.size1,
.katex .fontsize-ensurer.reset-size3.size1 {
  font-size: 0.71428571em;
}

.katex .sizing.reset-size3.size2,
.katex .fontsize-ensurer.reset-size3.size2 {
  font-size: 0.85714286em;
}

.katex .sizing.reset-size3.size3,
.katex .fontsize-ensurer.reset-size3.size3 {
  font-size: 1em;
}

.katex .sizing.reset-size3.size4,
.katex .fontsize-ensurer.reset-size3.size4 {
  font-size: 1.14285714em;
}

.katex .sizing.reset-size3.size5,
.katex .fontsize-ensurer.reset-size3.size5 {
  font-size: 1.28571429em;
}

.katex .sizing.reset-size3.size6,
.katex .fontsize-ensurer.reset-size3.size6 {
  font-size: 1.42857143em;
}

.katex .sizing.reset-size3.size7,
.katex .fontsize-ensurer.reset-size3.size7 {
  font-size: 1.71428571em;
}

.katex .sizing.reset-size3.size8,
.katex .fontsize-ensurer.reset-size3.size8 {
  font-size: 2.05714286em;
}

.katex .sizing.reset-size3.size9,
.katex .fontsize-ensurer.reset-size3.size9 {
  font-size: 2.46857143em;
}

.katex .sizing.reset-size3.size10,
.katex .fontsize-ensurer.reset-size3.size10 {
  font-size: 2.96285714em;
}

.katex .sizing.reset-size3.size11,
.katex .fontsize-ensurer.reset-size3.size11 {
  font-size: 3.55428571em;
}

.katex .sizing.reset-size4.size1,
.katex .fontsize-ensurer.reset-size4.size1 {
  font-size: 0.625em;
}

.katex .sizing.reset-size4.size2,
.katex .fontsize-ensurer.reset-size4.size2 {
  font-size: 0.75em;
}

.katex .sizing.reset-size4.size3,
.katex .fontsize-ensurer.reset-size4.size3 {
  font-size: 0.875em;
}

.katex .sizing.reset-size4.size4,
.katex .fontsize-ensurer.reset-size4.size4 {
  font-size: 1em;
}

.katex .sizing.reset-size4.size5,
.katex .fontsize-ensurer.reset-size4.size5 {
  font-size: 1.125em;
}

.katex .sizing.reset-size4.size6,
.katex .fontsize-ensurer.reset-size4.size6 {
  font-size: 1.25em;
}

.katex .sizing.reset-size4.size7,
.katex .fontsize-ensurer.reset-size4.size7 {
  font-size: 1.5em;
}

.katex .sizing.reset-size4.size8,
.katex .fontsize-ensurer.reset-size4.size8 {
  font-size: 1.8em;
}

.katex .sizing.reset-size4.size9,
.katex .fontsize-ensurer.reset-size4.size9 {
  font-size: 2.16em;
}

.katex .sizing.reset-size4.size10,
.katex .fontsize-ensurer.reset-size4.size10 {
  font-size: 2.5925em;
}

.katex .sizing.reset-size4.size11,
.katex .fontsize-ensurer.reset-size4.size11 {
  font-size: 3.11em;
}

.katex .sizing.reset-size5.size1,
.katex .fontsize-ensurer.reset-size5.size1 {
  font-size: 0.55555556em;
}

.katex .sizing.reset-size5.size2,
.katex .fontsize-ensurer.reset-size5.size2 {
  font-size: 0.66666667em;
}

.katex .sizing.reset-size5.size3,
.katex .fontsize-ensurer.reset-size5.size3 {
  font-size: 0.77777778em;
}

.katex .sizing.reset-size5.size4,
.katex .fontsize-ensurer.reset-size5.size4 {
  font-size: 0.88888889em;
}

.katex .sizing.reset-size5.size5,
.katex .fontsize-ensurer.reset-size5.size5 {
  font-size: 1em;
}

.katex .sizing.reset-size5.size6,
.katex .fontsize-ensurer.reset-size5.size6 {
  font-size: 1.11111111em;
}

.katex .sizing.reset-size5.size7,
.katex .fontsize-ensurer.reset-size5.size7 {
  font-size: 1.33333333em;
}

.katex .sizing.reset-size5.size8,
.katex .fontsize-ensurer.reset-size5.size8 {
  font-size: 1.6em;
}

.katex .sizing.reset-size5.size9,
.katex .fontsize-ensurer.reset-size5.size9 {
  font-size: 1.92em;
}

.katex .sizing.reset-size5.size10,
.katex .fontsize-ensurer.reset-size5.size10 {
  font-size: 2.30444444em;
}

.katex .sizing.reset-size5.size11,
.katex .fontsize-ensurer.reset-size5.size11 {
  font-size: 2.76444444em;
}

.katex .sizing.reset-size6.size1,
.katex .fontsize-ensurer.reset-size6.size1 {
  font-size: 0.5em;
}

.katex .sizing.reset-size6.size2,
.katex .fontsize-ensurer.reset-size6.size2 {
  font-size: 0.6em;
}

.katex .sizing.reset-size6.size3,
.katex .fontsize-ensurer.reset-size6.size3 {
  font-size: 0.7em;
}

.katex .sizing.reset-size6.size4,
.katex .fontsize-ensurer.reset-size6.size4 {
  font-size: 0.8em;
}

.katex .sizing.reset-size6.size5,
.katex .fontsize-ensurer.reset-size6.size5 {
  font-size: 0.9em;
}

.katex .sizing.reset-size6.size6,
.katex .fontsize-ensurer.reset-size6.size6 {
  font-size: 1em;
}

.katex .sizing.reset-size6.size7,
.katex .fontsize-ensurer.reset-size6.size7 {
  font-size: 1.2em;
}

.katex .sizing.reset-size6.size8,
.katex .fontsize-ensurer.reset-size6.size8 {
  font-size: 1.44em;
}

.katex .sizing.reset-size6.size9,
.katex .fontsize-ensurer.reset-size6.size9 {
  font-size: 1.728em;
}

.katex .sizing.reset-size6.size10,
.katex .fontsize-ensurer.reset-size6.size10 {
  font-size: 2.074em;
}

.katex .sizing.reset-size6.size11,
.katex .fontsize-ensurer.reset-size6.size11 {
  font-size: 2.488em;
}

.katex .sizing.reset-size7.size1,
.katex .fontsize-ensurer.reset-size7.size1 {
  font-size: 0.41666667em;
}

.katex .sizing.reset-size7.size2,
.katex .fontsize-ensurer.reset-size7.size2 {
  font-size: 0.5em;
}

.katex .sizing.reset-size7.size3,
.katex .fontsize-ensurer.reset-size7.size3 {
  font-size: 0.58333333em;
}

.katex .sizing.reset-size7.size4,
.katex .fontsize-ensurer.reset-size7.size4 {
  font-size: 0.66666667em;
}

.katex .sizing.reset-size7.size5,
.katex .fontsize-ensurer.reset-size7.size5 {
  font-size: 0.75em;
}

.katex .sizing.reset-size7.size6,
.katex .fontsize-ensurer.reset-size7.size6 {
  font-size: 0.83333333em;
}

.katex .sizing.reset-size7.size7,
.katex .fontsize-ensurer.reset-size7.size7 {
  font-size: 1em;
}

.katex .sizing.reset-size7.size8,
.katex .fontsize-ensurer.reset-size7.size8 {
  font-size: 1.2em;
}

.katex .sizing.reset-size7.size9,
.katex .fontsize-ensurer.reset-size7.size9 {
  font-size: 1.44em;
}

.katex .sizing.reset-size7.size10,
.katex .fontsize-ensurer.reset-size7.size10 {
  font-size: 1.72833333em;
}

.katex .sizing.reset-size7.size11,
.katex .fontsize-ensurer.reset-size7.size11 {
  font-size: 2.07333333em;
}

.katex .sizing.reset-size8.size1,
.katex .fontsize-ensurer.reset-size8.size1 {
  font-size: 0.34722222em;
}

.katex .sizing.reset-size8.size2,
.katex .fontsize-ensurer.reset-size8.size2 {
  font-size: 0.41666667em;
}

.katex .sizing.reset-size8.size3,
.katex .fontsize-ensurer.reset-size8.size3 {
  font-size: 0.48611111em;
}

.katex .sizing.reset-size8.size4,
.katex .fontsize-ensurer.reset-size8.size4 {
  font-size: 0.55555556em;
}

.katex .sizing.reset-size8.size5,
.katex .fontsize-ensurer.reset-size8.size5 {
  font-size: 0.625em;
}

.katex .sizing.reset-size8.size6,
.katex .fontsize-ensurer.reset-size8.size6 {
  font-size: 0.69444444em;
}

.katex .sizing.reset-size8.size7,
.katex .fontsize-ensurer.reset-size8.size7 {
  font-size: 0.83333333em;
}

.katex .sizing.reset-size8.size8,
.katex .fontsize-ensurer.reset-size8.size8 {
  font-size: 1em;
}

.katex .sizing.reset-size8.size9,
.katex .fontsize-ensurer.reset-size8.size9 {
  font-size: 1.2em;
}

.katex .sizing.reset-size8.size10,
.katex .fontsize-ensurer.reset-size8.size10 {
  font-size: 1.44027778em;
}

.katex .sizing.reset-size8.size11,
.katex .fontsize-ensurer.reset-size8.size11 {
  font-size: 1.72777778em;
}

.katex .sizing.reset-size9.size1,
.katex .fontsize-ensurer.reset-size9.size1 {
  font-size: 0.28935185em;
}

.katex .sizing.reset-size9.size2,
.katex .fontsize-ensurer.reset-size9.size2 {
  font-size: 0.34722222em;
}

.katex .sizing.reset-size9.size3,
.katex .fontsize-ensurer.reset-size9.size3 {
  font-size: 0.40509259em;
}

.katex .sizing.reset-size9.size4,
.katex .fontsize-ensurer.reset-size9.size4 {
  font-size: 0.46296296em;
}

.katex .sizing.reset-size9.size5,
.katex .fontsize-ensurer.reset-size9.size5 {
  font-size: 0.52083333em;
}

.katex .sizing.reset-size9.size6,
.katex .fontsize-ensurer.reset-size9.size6 {
  font-size: 0.5787037em;
}

.katex .sizing.reset-size9.size7,
.katex .fontsize-ensurer.reset-size9.size7 {
  font-size: 0.69444444em;
}

.katex .sizing.reset-size9.size8,
.katex .fontsize-ensurer.reset-size9.size8 {
  font-size: 0.83333333em;
}

.katex .sizing.reset-size9.size9,
.katex .fontsize-ensurer.reset-size9.size9 {
  font-size: 1em;
}

.katex .sizing.reset-size9.size10,
.katex .fontsize-ensurer.reset-size9.size10 {
  font-size: 1.20023148em;
}

.katex .sizing.reset-size9.size11,
.katex .fontsize-ensurer.reset-size9.size11 {
  font-size: 1.43981481em;
}

.katex .sizing.reset-size10.size1,
.katex .fontsize-ensurer.reset-size10.size1 {
  font-size: 0.24108004em;
}

.katex .sizing.reset-size10.size2,
.katex .fontsize-ensurer.reset-size10.size2 {
  font-size: 0.28929605em;
}

.katex .sizing.reset-size10.size3,
.katex .fontsize-ensurer.reset-size10.size3 {
  font-size: 0.33751205em;
}

.katex .sizing.reset-size10.size4,
.katex .fontsize-ensurer.reset-size10.size4 {
  font-size: 0.38572806em;
}

.katex .sizing.reset-size10.size5,
.katex .fontsize-ensurer.reset-size10.size5 {
  font-size: 0.43394407em;
}

.katex .sizing.reset-size10.size6,
.katex .fontsize-ensurer.reset-size10.size6 {
  font-size: 0.48216008em;
}

.katex .sizing.reset-size10.size7,
.katex .fontsize-ensurer.reset-size10.size7 {
  font-size: 0.57859209em;
}

.katex .sizing.reset-size10.size8,
.katex .fontsize-ensurer.reset-size10.size8 {
  font-size: 0.69431051em;
}

.katex .sizing.reset-size10.size9,
.katex .fontsize-ensurer.reset-size10.size9 {
  font-size: 0.83317261em;
}

.katex .sizing.reset-size10.size10,
.katex .fontsize-ensurer.reset-size10.size10 {
  font-size: 1em;
}

.katex .sizing.reset-size10.size11,
.katex .fontsize-ensurer.reset-size10.size11 {
  font-size: 1.19961427em;
}

.katex .sizing.reset-size11.size1,
.katex .fontsize-ensurer.reset-size11.size1 {
  font-size: 0.20096463em;
}

.katex .sizing.reset-size11.size2,
.katex .fontsize-ensurer.reset-size11.size2 {
  font-size: 0.24115756em;
}

.katex .sizing.reset-size11.size3,
.katex .fontsize-ensurer.reset-size11.size3 {
  font-size: 0.28135048em;
}

.katex .sizing.reset-size11.size4,
.katex .fontsize-ensurer.reset-size11.size4 {
  font-size: 0.32154341em;
}

.katex .sizing.reset-size11.size5,
.katex .fontsize-ensurer.reset-size11.size5 {
  font-size: 0.36173633em;
}

.katex .sizing.reset-size11.size6,
.katex .fontsize-ensurer.reset-size11.size6 {
  font-size: 0.40192926em;
}

.katex .sizing.reset-size11.size7,
.katex .fontsize-ensurer.reset-size11.size7 {
  font-size: 0.48231511em;
}

.katex .sizing.reset-size11.size8,
.katex .fontsize-ensurer.reset-size11.size8 {
  font-size: 0.57877814em;
}

.katex .sizing.reset-size11.size9,
.katex .fontsize-ensurer.reset-size11.size9 {
  font-size: 0.69453376em;
}

.katex .sizing.reset-size11.size10,
.katex .fontsize-ensurer.reset-size11.size10 {
  font-size: 0.83360129em;
}

.katex .sizing.reset-size11.size11,
.katex .fontsize-ensurer.reset-size11.size11 {
  font-size: 1em;
}

.katex .delimsizing.size1 {
  font-family: KaTeX_Size1;
}

.katex .delimsizing.size2 {
  font-family: KaTeX_Size2;
}

.katex .delimsizing.size3 {
  font-family: KaTeX_Size3;
}

.katex .delimsizing.size4 {
  font-family: KaTeX_Size4;
}

.katex .delimsizing.mult .delim-size1 > span {
  font-family: KaTeX_Size1;
}

.katex .delimsizing.mult .delim-size4 > span {
  font-family: KaTeX_Size4;
}

.katex .nulldelimiter {
  display: inline-block;
  width: 0.12em;
}

.katex .delimcenter {
  position: relative;
}

.katex .op-symbol {
  position: relative;
}

.katex .op-symbol.small-op {
  font-family: KaTeX_Size1;
}

.katex .op-symbol.large-op {
  font-family: KaTeX_Size2;
}

.katex .op-limits > .vlist-t {
  text-align: center;
}

.katex .accent > .vlist-t {
  text-align: center;
}

.katex .accent .accent-body {
  width: 0;
  position: relative;
}

.katex .overlay {
  display: block;
}

.katex .mtable .vertical-separator {
  display: inline-block;
  margin: 0 -0.125em;
  width: 0.25em;
}

.katex .mtable .arraycolsep {
  display: inline-block;
}

.katex .mtable .col-align-c > .vlist-t {
  text-align: center;
}

.katex .mtable .col-align-l > .vlist-t {
  text-align: left;
}

.katex .mtable .col-align-r > .vlist-t {
  text-align: right;
}

.katex .svg-align {
  text-align: left;
}

.katex svg {
  display: block;
  position: absolute;
  width: 100%;
  fill: currentColor;
  stroke: currentColor;
  fill-rule: nonzero;
  fill-opacity: 1;
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  stroke-opacity: 1;
}

.katex svg path {
  stroke: none;
}

.katex .vertical-separator svg {
  width: 0.25em;
}

.katex .stretchy {
  width: 100%;
  display: block;
}

.katex .stretchy:before,
.katex .stretchy:after {
  content: "";
}

.katex .hide-tail {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.katex .halfarrow-left {
  position: absolute;
  left: 0;
  width: 50.1%;
  overflow: hidden;
}

.katex .halfarrow-right {
  position: absolute;
  right: 0;
  width: 50%;
  overflow: hidden;
}

.katex .brace-left {
  position: absolute;
  left: 0;
  width: 25.1%;
  overflow: hidden;
}

.katex .brace-center {
  position: absolute;
  left: 25%;
  width: 50%;
  overflow: hidden;
}

.katex .brace-right {
  position: absolute;
  right: 0;
  width: 25.1%;
  overflow: hidden;
}

.katex .x-arrow-pad {
  padding: 0 0.5em;
}

.katex .x-arrow,
.katex .mover,
.katex .munder {
  text-align: center;
}

.katex .boxpad {
  padding: 0 0.3em 0 0.3em;
}

.katex .fbox {
  box-sizing: border-box;
  border: 0.04em solid black;
}

.katex .fcolorbox {
  box-sizing: border-box;
  border: 0.04em solid;
}

.katex .cancel-pad {
  padding: 0 0.2em 0 0.2em;
}

.katex .mord + .cancel-lap,
.katex .mbin + .cancel-lap {
  margin-left: -0.2em;
}

.katex .cancel-lap + .mord,
.katex .cancel-lap + .mbin,
.katex .cancel-lap + .msupsub {
  margin-left: -0.2em;
}

.katex .sout {
  border-bottom-style: solid;
  border-bottom-width: 0.08em;
}</style><style type="text/css">
#free-reward-panel .reward-users-modal main {
  padding: 0;
}
</style><style type="text/css">
@charset "UTF-8";
/*
 * 变量
*/
.reward-note-modal .v-modal {
  width: 620px;
  text-align: center;
}
.reward-note-modal .v-modal form {
    margin: 0 auto 25px auto;
    padding: 0 40px;
}
.reward-note-modal .v-modal .reward-intro {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 16px;
}
.reward-note-modal .v-modal .reward-intro .avatar {
      cursor: default !important;
      width: 36px;
      height: 36px;
      margin-right: 10px;
      display: inline-block;
}
.reward-note-modal .v-modal .reward-intro .intro {
      margin-right: 5px;
      font-weight: bold;
      vertical-align: middle;
}
.reward-note-modal .v-modal .reward-intro i {
      color: #EA6F5A;
      vertical-align: middle;
}
.reward-note-modal .v-modal .main-inputs {
    margin: 25px 0;
}
.reward-note-modal .v-modal .main-inputs .amount-group {
      margin: 0 -5px;
}
.reward-note-modal .v-modal .main-inputs .amount-group input {
        display: none;
}
.reward-note-modal .v-modal .main-inputs .amount-group input:checked + .option {
        color: #EA6F5A;
        border-color: #EA6F5A;
}
.reward-note-modal .v-modal .main-inputs .amount-group .custom-amount:checked + .option .custom-text {
        opacity: 0;
}
.reward-note-modal .v-modal .main-inputs .amount-group .custom-amount:checked + .option .custom-amount-input {
        opacity: 1;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option {
        position: relative;
        margin: 0 5px 15px;
        width: 156px;
        height: 56px;
        line-height: 54px;
        border: 1px solid #E6E6E6;
        border-radius: 4px;
        font-weight: normal;
        color: #999999;
        cursor: pointer;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option i {
          font-size: 16px;
          vertical-align: middle;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option .amount {
          font-size: 28px;
          vertical-align: middle;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option .piece {
          font-size: 13px;
          vertical-align: sub;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option .custom-amount-input {
          position: absolute;
          top: 0;
          z-index: -1;
          width: 100%;
          opacity: 0;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option .custom-amount-input i {
            position: absolute;
            top: 0;
            left: 10px;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option .custom-amount-input .piece {
            position: absolute;
            top: 4px;
            right: 10px;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option .custom-amount-input input {
            display: block;
            margin: 0 auto;
            width: 80px;
            height: 54px;
            line-height: 54px;
            border: none;
            font-size: 28px;
            text-align: center;
            background: transparent;
            -moz-appearance: textfield;
}
.reward-note-modal .v-modal .main-inputs .amount-group .option .custom-amount-input input::-webkit-outer-spin-button, .reward-note-modal .v-modal .main-inputs .amount-group .option .custom-amount-input input::-webkit-inner-spin-button {
              -webkit-appearance: none !important;
}
.reward-note-modal .v-modal .main-inputs .message {
      padding: 15px 20px;
      margin-bottom: 0;
      font-size: 14px;
      border: 1px solid #E6E6E6;
      color: #333333;
      border-radius: 4px;
      background-color: rgba(180, 180, 180, 0.1);
}
.reward-note-modal .v-modal .main-inputs .message textarea {
        width: 100%;
        height: 44px;
        padding: 0;
        margin: 0;
        resize: none;
        background: none !important;
        border: none !important;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-box-shadow: none;
                box-shadow: none;
}
.reward-note-modal .v-modal .main-inputs .message textarea:focus {
          outline: none;
}
.reward-note-modal .v-modal .reward-info .amount {
    font-size: 28px;
    font-weight: bold;
    color: #EA6F5A;
}
.reward-note-modal .v-modal .reward-info .pay-method {
    font-size: 14px;
}
.reward-note-modal .v-modal .reward-info .pay-method a {
      color: #3194D0;
}
.reward-note-modal .v-modal .choose-pay {
    margin: 0 -5px;
}
.reward-note-modal .v-modal .choose-pay input {
      display: none;
}
.reward-note-modal .v-modal .choose-pay input:checked + .option {
      color: #EA6F5A;
      border-color: #EA6F5A;
}
.reward-note-modal .v-modal .choose-pay .option {
      margin: 20px 5px 10px;
      width: 156px;
      height: 56px;
      line-height: 54px;
      text-align: center;
      border: 1px solid #E6E6E6;
      border-radius: 4px;
      cursor: pointer;
}
.reward-note-modal .v-modal .choose-pay .option img {
        height: 30px;
}
.reward-note-modal .v-modal .choose-pay .option img.day.alipay, .reward-note-modal .v-modal .choose-pay .option img.night.alipay {
        min-width: 85px;
}
.reward-note-modal .v-modal .choose-pay .option img.day.wechat, .reward-note-modal .v-modal .choose-pay .option img.night.wechat {
        min-width: 112px;
}
.reward-note-modal .v-modal .choose-pay .option img.night {
        display: none;
}
.reward-note-modal .v-modal .choose-pay .tooltip {
      width: 230px;
}
.reward-note-modal .v-modal .modal-footer {
    padding: 0 15px 20px;
    border: none;
    background-color: transparent;
    text-align: center;
}
.reward-note-modal .v-modal .modal-footer .btn {
      padding: 8px 45px;
      font-size: 24px;
}
.reward-note-modal .v-modal .btn-pay {
    padding: 8px 25px;
    font-size: 16px;
    color: #ffffff;
    background-color: #F5A623;
}
.weixin-pay, .success-pay {
  text-align: center;
}
.weixin-pay .v-modal, .success-pay .v-modal {
    width: 350px;
}
.weixin-pay .ic-successed, .success-pay .ic-successed {
    font-size: 60px;
    color: #3db922;
}
.weixin-pay h2, .weixin-pay h3, .success-pay h2, .success-pay h3 {
    margin-bottom: 20px;
    color: #333333;
}
.weixin-pay h2, .success-pay h2 {
    margin: 0 0 40px 0;
    font-size: 24px;
}
.weixin-pay .bind-text, .success-pay .bind-text {
    position: relative;
    margin-bottom: 30px;
    font-size: 14px;
    color: #999999;
}
.weixin-pay .bind-text:before, .weixin-pay .bind-text:after, .success-pay .bind-text:before, .success-pay .bind-text:after {
      content: "";
      border-top: 1px solid #999;
      display: block;
      position: absolute;
      width: 40px;
      top: 8px;
}
.weixin-pay .bind-text:before, .success-pay .bind-text:before {
      left: 30px;
}
.weixin-pay .bind-text:after, .success-pay .bind-text:after {
      right: 30px;
}
.weixin-pay .share-bind, .success-pay .share-bind {
    display: block;
    margin-bottom: 30px;
}
.weixin-pay .share-bind i, .success-pay .share-bind i {
      margin-right: 4px;
      font-size: 22px;
      vertical-align: middle;
}
.weixin-pay .share-bind.wechat i, .success-pay .share-bind.wechat i {
      color: #00BB29;
}
.weixin-pay .share-bind.weibo i, .success-pay .share-bind.weibo i {
      color: #E05244;
}
.weixin-pay .wx-qr-code, .success-pay .wx-qr-code {
    display: inline-block;
}
.weixin-pay .wx-qr-code img, .success-pay .wx-qr-code img {
      margin: 0 auto;
      padding: 10px;
      width: 200px;
      background-color: #ffffff;
}
.weixin-pay .pay-amount, .success-pay .pay-amount {
    margin: 20px 0;
    color: #787878;
}
.weixin-pay .pay-amount span, .success-pay .pay-amount span {
      color: #F5A623;
}
</style><style type="text/css">
@charset "UTF-8";
/*
 * 变量
*/
.v-modal-wrap {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: transparent;
}
.v-modal-wrap.modal-leave-active {
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.v-modal-wrap.modal-enter-active .v-modal-mask, .v-modal-wrap.modal-leave-active .v-modal-mask {
    opacity: 0;
}
.v-modal-wrap.modal-enter-active .v-modal, .v-modal-wrap.modal-leave-active .v-modal {
    -webkit-transform: translate(-50%, -70%);
        -ms-transform: translate(-50%, -70%);
            transform: translate(-50%, -70%);
    opacity: 0;
}
.v-modal-wrap .v-modal-mask {
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1;
}
.v-modal-wrap .v-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #fff;
    -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
    opacity: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow: hidden;
}
.v-modal-wrap .v-modal > header:before, .v-modal-wrap .v-modal > header:after, .v-modal-wrap .v-modal > main:before, .v-modal-wrap .v-modal > main:after, .v-modal-wrap .v-modal > footer:before, .v-modal-wrap .v-modal > footer:after {
      content: '';
      clear: both;
      display: table;
}
.v-modal-wrap .v-modal > header {
      padding: 20px;
      border-bottom: 1px solid #F0F0F0;
}
.v-modal-wrap .v-modal > header h4 {
        margin: 0;
        color: #333;
        text-align: left;
}
.v-modal-wrap .v-modal .close {
      position: absolute;
      right: 16px;
      top: 20px;
      font-size: 26px;
      line-height: 20px;
      color: rgba(0, 0, 0, 0.8);
}
.v-modal-wrap .v-modal .close:hover {
        color: #000000;
}
.v-modal-wrap .v-modal > main {
      padding: 20px 20px 20px 20px;
      font-size: 15px;
      color: #333;
      -webkit-box-flex: 1;
      -webkit-flex-grow: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
      overflow-x: hidden;
      overflow-y: auto;
}
.v-modal-wrap .v-modal > footer {
      padding: 20px;
      background-color: #fff;
}
.v-modal-wrap .v-modal > footer button {
        padding: 0;
        margin: 0;
        background-color: transparent;
        border: 0;
        float: right;
}
.v-modal-wrap .v-modal > footer button:focus {
          outline: 0;
}
.v-modal-wrap .v-modal > footer .submit {
        padding: 4px 12px;
        border: 1px solid;
        border-radius: 20px;
}
.v-modal-wrap .v-modal > footer .cancel {
        margin-top: 5px;
}
.v-modal-wrap .v-modal > footer .cancel:hover {
          color: #333333;
}
.reader-night-mode .v-modal-wrap .v-modal-mask {
  background-color: rgba(63, 63, 63, 0.7);
}
.reader-night-mode .v-modal-wrap .v-modal {
  background-color: #3f3f3f;
}
.reader-night-mode .v-modal-wrap .v-modal header {
    border-color: #2F2F2F;
}
.reader-night-mode .v-modal-wrap .v-modal header h4 {
      color: #C8C8C8;
}
.reader-night-mode .v-modal-wrap .v-modal .close {
    color: #C8C8C8;
}
.reader-night-mode .v-modal-wrap .v-modal .close:hover {
      color: #ffffff;
}
.reader-night-mode .v-modal-wrap .v-modal main {
    color: #C8C8C8;
}
.reader-night-mode .v-modal-wrap .v-modal footer {
    background-color: #3f3f3f;
}
.reader-night-mode .v-modal-wrap .v-modal footer .cancel:hover {
      color: #C8C8C8;
}
</style><style type="text/css">
@charset "UTF-8";
/*
 * 变量
*/
.like[data-v-6ddd02c6] {
  display: inline-block;
}
.like .like-group[data-v-6ddd02c6] {
    position: relative;
    padding: 13px 0 15px 0;
    font-size: 0;
    border: 1px solid #EA6F5A;
    border-radius: 40px;
}
.like .like-group[data-v-6ddd02c6]:hover {
      background-color: rgba(236, 97, 73, 0.05);
}
.like .like-group .btn-like[data-v-6ddd02c6] {
      display: inline-block;
      font-size: 19px;
}
.like .like-group .btn-like[data-v-6ddd02c6]:before {
        content: '';
        position: absolute;
        left: 12px;
        top: 2px;
        width: 50px;
        height: 50px;
        background-image: url(//cdn2.jianshu.io/assets/web/like_animation_steps-62a00a7b52377d3069927cdb8e61fd34.png);
        background-position: left;
        background-repeat: no-repeat;
        background-size: 1000px 50px;
}
.like .like-group .btn-like a[data-v-6ddd02c6] {
        position: relative;
        padding: 18px 30px 18px 55px;
        color: #EA6F5A;
}
.like .like-group .modal-wrap[data-v-6ddd02c6] {
      font-size: 18px;
      border-left: 1px solid rgba(236, 97, 73, 0.4);
      display: inline-block;
      margin-left: -15px;
}
.like .like-group .modal-wrap a[data-v-6ddd02c6] {
        color: #EA6F5A;
        padding: 18px 26px 18px 18px;
}
.like .like-group.like-animation[data-v-6ddd02c6], .like .like-group.active[data-v-6ddd02c6] {
      background-color: #EA6F5A;
}
.like .like-group.like-animation .btn-like a[data-v-6ddd02c6], .like .like-group.active .btn-like a[data-v-6ddd02c6] {
        color: white;
}
.like .like-group.like-animation .modal-wrap[data-v-6ddd02c6], .like .like-group.active .modal-wrap[data-v-6ddd02c6] {
        border-left: 1px solid white;
}
.like .like-group.like-animation .modal-wrap a[data-v-6ddd02c6], .like .like-group.active .modal-wrap a[data-v-6ddd02c6] {
          color: white;
}
.like .like-group.like-animation .btn-like[data-v-6ddd02c6]:before {
      -webkit-animation: likeBlast-data-v-6ddd02c6 0.6s 1 steps(19);
              animation: likeBlast-data-v-6ddd02c6 0.6s 1 steps(19);
      background-position: right;
}
@-webkit-keyframes likeBlast {
0% {
    background-position: left;
}
100% {
    background-position: right;
}
}
@keyframes likeBlast-data-v-6ddd02c6 {
0% {
    background-position: left;
}
100% {
    background-position: right;
}
}
.like .like-group.active .btn-like[data-v-6ddd02c6]:before {
      background-position: right;
}
</style><style type="text/css">
@charset "UTF-8";
/*
 * 变量
*/
.main {
  position: relative;
  margin: 0 auto;
  padding: 0 0 30px 0;
  width: 620px;
}
.main .title {
    padding-left: 8px;
    border-left: 3px solid #EA6F5A;
    line-height: 1;
    font-size: 15px;
}
.main .collection-settings {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 13px;
    color: #A0A0A0;
}
.main .collection-settings span {
      padding-left: 4px;
}
.main .include-collection {
    width: 100%;
    padding-top: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
}
.main .include-collection .item {
      display: inline-block;
      margin: 0 12px 12px 0;
      min-height: 32px;
      background-color: white;
      border: 1px solid #DCDCDC;
      border-radius: 4px;
      vertical-align: top;
      overflow: hidden;
}
.main .include-collection .item img {
        width: 32px;
        height: 32px;
}
.main .include-collection .item .name {
        display: inline-block;
        padding: 0 10px;
        font-size: 14px;
}
.main .include-collection .add-collection-wrap {
      margin: 0 12px 12px 0;
}
.main .include-collection .add-collection {
      padding: 8px 12px;
      font-size: 14px;
      border: 1px solid #DCDCDC;
      border-radius: 4px;
}
.main .include-collection .add-collection i {
        margin-right: 4px;
        color: #969696;
}
.main .recommend-note a {
    position: relative;
    margin: 20px 2px 0 0;
    width: 200px;
    height: 160px;
    display: inline-block;
}
.main .recommend-note a:after {
      content: "";
      position: absolute;
      width: 200px;
      height: 160px;
      border-radius: 0 0 4px 4px;
      -webkit-box-shadow: inset 0px -80px 50px -22px rgba(0, 0, 0, 0.6);
              box-shadow: inset 0px -80px 50px -22px rgba(0, 0, 0, 0.6);
      top: 0;
      left: 0;
      z-index: 1;
}
.main .recommend-note .name {
    position: absolute;
    bottom: 40px;
    left: 10px;
    right: 10px;
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
    z-index: 2;
}
.main .recommend-note .author {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
}
.main .recommend-note .avatar {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.main .recommend-note .avatar img {
      border-radius: 50%;
}
.main .recommend-note .author-name {
    font-size: 12px;
    color: #ffffff;
    display: inline-block;
    vertical-align: -1px;
}
.main .show-more {
    margin: 0 12px 12px 0;
    font-size: 14px;
    color: #A0A0A0;
}
</style></head>

  <body lang="zh-CN" class="reader-black-font" cz-shortcut-listen="true">
    <!-- 全局顶部导航栏 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="width-limit">
    <!-- 左上方 Logo -->
    <a class="logo" href="https://www.jianshu.com/"><img src="./day03 - 简书_files/nav-logo-4c7bbafe27adc892f3046e6978459bac.png" alt="Nav logo"></a>

    <!-- 右上角 -->
      <!-- 登录显示写文章 -->
      <a class="btn write-btn" target="_blank" href="https://www.jianshu.com/writer#/">
        <i class="iconfont ic-write"></i>写文章
</a>
    <!-- 如果用户登录，显示下拉菜单 -->
      <div class="user">
        <div data-hover="dropdown">
          <a class="avatar" href="https://www.jianshu.com/u/0f1d279d09ea"><img src="./day03 - 简书_files/f972c103-8fb0-4712-9a42-ae633bb0521a" alt="120"></a>
        </div>
        <ul class="dropdown-menu">
          <li>
            <a href="https://www.jianshu.com/u/0f1d279d09ea">
              <i class="iconfont ic-navigation-profile"></i><span>我的主页</span>
</a>          </li>
          <li>
            <!-- TODO bookmarks_path -->
            <a href="https://www.jianshu.com/bookmarks">
              <i class="iconfont ic-navigation-mark"></i><span>收藏的文章</span>
</a>          </li>
          <li>
            <a href="https://www.jianshu.com/users/0f1d279d09ea/liked_notes">
              <i class="iconfont ic-navigation-like"></i><span>喜欢的文章</span>
</a>          </li>
          <li>
            <a href="https://www.jianshu.com/my/paid_notes">
              <i class="iconfont ic-paid"></i><span>已购内容</span>
</a>          </li>
          <li>
            <a href="https://www.jianshu.com/wallet">
              <i class="iconfont ic-navigation-wallet"></i><span>我的钱包</span>
</a>          </li>
          <li>
            <a href="https://www.jianshu.com/settings">
              <i class="iconfont ic-navigation-settings"></i><span>设置</span>
</a>          </li>
          <li>
            <a href="https://www.jianshu.com/faqs">
              <i class="iconfont ic-navigation-feedback"></i><span>帮助与反馈</span>
</a>          </li>
          <li>
            <a rel="nofollow" data-method="delete" href="https://www.jianshu.com/sign_out">
              <i class="iconfont ic-navigation-signout"></i><span>退出</span>
</a>          </li>
        </ul>
      </div>

    <div class="style-mode"><a class="style-mode-btn"><i class="iconfont ic-navigation-mode"></i></a> <div class="popover-modal" style="left: 0px; display: none;"><div class="meta"><i class="iconfont ic-navigation-night"></i><span>夜间模式</span></div> <div class="switch day-night-group"><a class="switch-btn">开</a> <a class="switch-btn active">关</a></div> <hr> <div class="switch font-family-group"><a class="switch-btn font-song">宋体</a> <a class="switch-btn font-hei active">黑体</a></div> <div class="switch"><a class="switch-btn active">简</a> <a class="switch-btn">繁</a></div></div></div>
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse" id="menu">
        <ul class="nav navbar-nav">
            <li class="tab ">
              <a href="https://www.jianshu.com/">
                <span class="menu-text">发现</span><i class="iconfont ic-navigation-discover menu-icon"></i>
</a>            </li>
            <li class="tab ">
              <a href="https://www.jianshu.com/subscriptions">
                <span class="menu-text">关注</span><i class="iconfont ic-navigation-follow menu-icon"></i>
</a>            </li>
            <li class="tab notification"><a data-hover="dropdown" href="https://www.jianshu.com/notifications" class="notification-btn"><span class="menu-text">消息</span> <i class="iconfont ic-navigation-notification menu-icon"></i> <!----> <!----></a> <ul class="dropdown-menu"><li><a href="https://www.jianshu.com/notifications#/comments"><i class="iconfont ic-comments"></i> <span>评论</span> <!----></a></li><li><a href="https://www.jianshu.com/notifications#/chats"><i class="iconfont ic-chats"></i> <span>简信</span> <!----></a></li><li><a href="https://www.jianshu.com/notifications#/requests"><i class="iconfont ic-requests"></i> <span>投稿请求</span> <!----></a></li><li><a href="https://www.jianshu.com/notifications#/likes"><i class="iconfont ic-likes"></i> <span>喜欢和赞</span> <!----></a></li><li><a href="https://www.jianshu.com/notifications#/follows"><i class="iconfont ic-follows"></i> <span>关注</span> <!----></a></li><li><a href="https://www.jianshu.com/notifications#/money"><i class="iconfont ic-money"></i> <span>赞赏和付费</span> <!----></a></li><li><a href="https://www.jianshu.com/notifications#/others"><i class="iconfont ic-others"></i> <span>其它提醒</span> <!----></a></li></ul></li>
          <li class="search">
            <form target="_blank" action="https://www.jianshu.com/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
              <input type="text" name="q" id="q" value="" autocomplete="off" placeholder="搜索" class="search-input">
              <a class="search-btn" href="javascript:void(null)"><i class="iconfont ic-search"></i></a>
</form>          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>

    
<div class="note">
  <div class="post">
    <div class="article">
        <h1 class="title">day03</h1>

        <!-- 作者区域 -->
        <div class="author">
          <a class="avatar" href="https://www.jianshu.com/u/0f1d279d09ea">
            <img src="./day03 - 简书_files/f972c103-8fb0-4712-9a42-ae633bb0521a(1)" alt="96">
</a>          <div class="info">
            <span class="name"><a href="https://www.jianshu.com/u/0f1d279d09ea">idiot_teresa</a></span>
            <!-- 关注用户按钮 -->
            <div props-data-classes="user-follow-button-header" data-author-follow-button=""></div>
            <!-- 文章数据信息 -->
            <div class="meta">
              <!-- 如果文章更新时间大于发布时间，那么使用 tooltip 显示更新时间 -->
                <span class="publish-time">2018.07.11 19:49</span>
              <span class="wordage">字数 378</span>
            <span class="views-count">阅读 0</span><span class="comments-count">评论 0</span><span class="likes-count">喜欢 0</span></div>
          </div>
          <!-- 如果是当前作者，加入编辑按钮 -->
        <a href="https://www.jianshu.com/writer#/notebooks/27418724/notes/30725888" target="_blank" class="edit">编辑文章</a></div>


        <!-- 文章内容 -->
        <div data-note-content="" class="show-content">
          <div class="show-content-free">
            <h1>1.盒子模型</h1>
<h4>1.1盒子模型的传参</h4>
<pre class="hljs css"><code class="css"><span class="hljs-selector-tag">margin</span><span class="hljs-selector-pseudo">:100px</span>； 四个方向全部改变
<span class="hljs-selector-tag">margin</span><span class="hljs-selector-pseudo">:100px</span> 200<span class="hljs-selector-tag">px</span>;  就是上下100<span class="hljs-selector-tag">px</span>  左右200<span class="hljs-selector-tag">px</span>
<span class="hljs-selector-tag">margin</span><span class="hljs-selector-pseudo">:100px</span> 200<span class="hljs-selector-tag">px</span> 300<span class="hljs-selector-tag">px</span>;  上100<span class="hljs-selector-tag">px</span> 左右200 下300
<span class="hljs-selector-tag">margin</span><span class="hljs-selector-pseudo">:100px</span> 200<span class="hljs-selector-tag">px</span> 300<span class="hljs-selector-tag">px</span> 400<span class="hljs-selector-tag">px</span>;  顺时针
</code></pre>
<h4>1.2 <code>PADDING</code>
</h4>
<pre class="hljs undefined"><code>传一个参数 四个方向都改变
padding: 20px 30px; 上下20px 左右20px
padding: 20px 30px 40px; 上20 左右30 下40
padding: 20px 30px 40px 50px;顺时针
</code></pre>
<h1>2.<code>HTML</code>标签的分类</h1>
<h4>2.1块标签</h4>
<blockquote>
<p><code>h1</code>,<code>p</code>,<code>div</code>,<code>ul</code>,<code>li</code>,<code>dl</code>,<code>dt</code>,<code>dd</code>都是块标签<br>
特点：1、独占一行 2、能设置width，height</p>
</blockquote>
<pre class="hljs xml"><code class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>h1<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>  
        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">dl</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">dt</span>&gt;</span>dt<span class="hljs-tag">&lt;/<span class="hljs-name">dt</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">dd</span>&gt;</span>dd<span class="hljs-tag">&lt;/<span class="hljs-name">dd</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">dl</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>div<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<h4>2.2内联标签</h4>
<blockquote>
<p>a,span,em,strong<br>
//特点<br>
1.并排显示<br>
2.不能设置width,height<br>
3.不能设置margin-top,margin-bottom</p>
</blockquote>
<pre class="hljs xml"><code class="xml"> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>&gt;</span>a<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> 
 <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>i<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">em</span>&gt;</span>em<span class="hljs-tag">&lt;/<span class="hljs-name">em</span>&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>strong<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span>
</code></pre>
<h4>2.3内联块</h4>
<blockquote>
<p>//常用的内联块标签<br>
button,img,input<br>
//特点<br>
1.并排显示<br>
2.可以设置宽高</p>
</blockquote>
<pre class="hljs xml"><code class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>百度一下<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"images/timg1.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>&gt;</span>
</code></pre>
<h4>2.4块标签，内联元素和内联块</h4>
<ul>
<li>内联元素和内联块元素水平居中</li>
</ul>
<pre class="hljs css"><code class="css">{  <span class="hljs-attribute">display</span>:block;
     <span class="hljs-attribute">margin-left</span>:auto;
     <span class="hljs-attribute">margin-right</span>:auto;
 }
</code></pre>
<ul>
<li>块标签默认</li>
</ul>
<pre class="hljs undefined"><code>display：block；
</code></pre>
<ul>
<li>内联默认</li>
</ul>
<pre class="hljs cpp"><code class="cpp">display:<span class="hljs-keyword">inline</span>;
</code></pre>
<ul>
<li>内联块默认</li>
</ul>
<pre class="hljs cpp"><code class="cpp">display:<span class="hljs-keyword">inline</span>-block
</code></pre>
<h4>2.5如何让内联元素和内联块元素水平居中</h4>
<blockquote>
<p>//给父级加<br>
text-align:center</p>
</blockquote>
<pre class="hljs css"><code class="css"> <span class="hljs-selector-tag">body</span>{
     <span class="hljs-attribute">text-align</span>: center;
      }
</code></pre>
<h1>3.<code>CSS</code>选择器</h1>
<h4>3.1选择器</h4>
<ul>
<li>伪类选择器</li>
</ul>
<blockquote>
<p>p{color:red; }<br>
.one{color:yellow;}<br>
#two{color:green;}</p>
</blockquote>
<pre class="hljs css"><code class="css"> <span class="hljs-selector-tag">p</span>,<span class="hljs-selector-tag">h1</span>,<span class="hljs-selector-tag">div</span>{
      <span class="hljs-attribute">color</span>: royalblue;
          }
</code></pre>
<ul>
<li>分组选择器</li>
</ul>
<blockquote>
<p>p:hover{color:firebrick;}</p>
</blockquote>
<h4>3.2后代选择器</h4>
<blockquote>
<p>.parent p{} 选择parent之后的所有p元素</p>
</blockquote>
<pre class="hljs xml"><code class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"parent"</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>hello world<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>hello world<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
     <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>hello world<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
     <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>hello world<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
<h4>3.2兄弟选择器</h4>
<blockquote>
<p>div+p{ color:red;} --&gt;选中div之后的第一个p元素<br>
div~p{ color:bule;} --&gt;选中div之后的所有p元素</p>
</blockquote>
<pre class="hljs css"><code class="css"> <span class="hljs-selector-tag">div</span>~<span class="hljs-selector-tag">p</span>{
        <span class="hljs-attribute">color</span>: bisque;
       }
 <span class="hljs-selector-tag">div</span>+<span class="hljs-selector-tag">p</span>{
        <span class="hljs-attribute">color</span>: bisque;
       }
</code></pre>
<h4>3.3伪元素</h4>
<blockquote>
<p>伪元素--&gt;用css自定义生产的元素<br>
div:before{ content: " " }</p>
</blockquote>
<pre class="hljs css"><code class="css"><span class="hljs-selector-tag">div</span><span class="hljs-selector-pseudo">:before</span>{
        <span class="hljs-attribute">width</span>:<span class="hljs-number">100px</span>;
        <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;
        <span class="hljs-attribute">background</span>: red;
        <span class="hljs-attribute">content</span>:<span class="hljs-string">"前面"</span>;
        <span class="hljs-attribute">display</span>:block;
           }
</code></pre>
<h4>3.4属性选择器</h4>
<blockquote>
<p>语法<br>
element[attr=value]{}</p>
</blockquote>
<pre class="hljs css"><code class="css"> <span class="hljs-selector-attr">[class="one"]</span>{
                 <span class="hljs-attribute">color</span>:red;
               }
</code></pre>
<h4>3.5选择器的优先级</h4>
<blockquote>
<p>元素选择器&lt;class选择器&lt;ID选择器&lt;!important</p>
</blockquote>
<pre class="hljs css"><code class="css"><span class="hljs-selector-tag">p</span>{
        <span class="hljs-attribute">color</span>: antiquewhite <span class="hljs-meta">!important</span>;
  }
</code></pre>
<h3>3.6选择器的权重</h3>
<blockquote>
<p>选择器嵌套的层次越深，那么权重越高</p>
</blockquote>
<pre class="hljs css"><code class="css"> <span class="hljs-selector-class">.child</span>{
        <span class="hljs-attribute">color</span>: aqua;
    }
 <span class="hljs-selector-class">.parent</span>&gt;<span class="hljs-selector-class">.child</span>{
        <span class="hljs-attribute">color</span>:bisque; 
    }
</code></pre>

          </div>
        </div>
    </div>

    <!-- 如果是付费文章，未购买，则显示购买按钮 -->

    <!-- 连载目录项 -->

    <!-- 如果是付费文章 -->
      <!-- 如果是付费连载，已购买，且作者允许赞赏，则显示付费信息和赞赏 -->
        <div id="free-reward-panel" class="support-author"><p>小礼物走一走，来简书关注我</p> <div class="btn btn-pay">赞赏支持</div> <div class="supporter"><ul class="support-list"></ul> <!----></div> <!----> <!----></div>

      <div class="show-foot">
        <a class="notebook" href="https://www.jianshu.com/nb/27418724">
          <i class="iconfont ic-search-notebook"></i>
          <span>日记本</span>
</a>        <div class="copyright" data-toggle="tooltip" data-html="true" data-original-title="转载请联系作者获得授权，并标注“简书作者”。">
          © 著作权归作者所有
        </div>
        
      </div>

      <!-- 文章底部作者信息 -->
        <div class="follow-detail">
          <div class="info">
            <a class="avatar" href="https://www.jianshu.com/u/0f1d279d09ea">
              <img src="./day03 - 简书_files/f972c103-8fb0-4712-9a42-ae633bb0521a(1)" alt="96">
</a>            <div props-data-classes="user-follow-button-footer" data-author-follow-button=""></div>
            <a class="title" href="https://www.jianshu.com/u/0f1d279d09ea">idiot_teresa</a>
          <p>写了 556 字，被 1 人关注，获得了 1 个喜欢</p></div>
        </div>

    <div class="meta-bottom">
      <div data-v-6ddd02c6="" class="like"><div data-v-6ddd02c6="" class="btn like-group"><div data-v-6ddd02c6="" class="btn-like"><a data-v-6ddd02c6="">喜欢</a></div> <!----></div> <!----></div>
      <div class="share-group">
        <a class="share-circle" data-action="weixin-share" data-toggle="tooltip" data-original-title="分享到微信">
          <i class="iconfont ic-wechat"></i>
        </a>
        <a class="share-circle" data-action="weibo-share" data-toggle="tooltip" href="javascript:void((function(s,d,e,r,l,p,t,z,c){var%20f=&#39;http://v.t.sina.com.cn/share/share.php?appkey=1881139527&#39;,u=z||d.location,p=[&#39;&amp;url=&#39;,e(u),&#39;&amp;title=&#39;,e(t||d.title),&#39;&amp;source=&#39;,e(r),&#39;&amp;sourceUrl=&#39;,e(l),&#39;&amp;content=&#39;,c||&#39;gb2312&#39;,&#39;&amp;pic=&#39;,e(p||&#39;&#39;)].join(&#39;&#39;);function%20a(){if(!window.open([f,p].join(&#39;&#39;),&#39;mb&#39;,[&#39;toolbar=0,status=0,resizable=1,width=440,height=430,left=&#39;,(s.width-440)/2,&#39;,top=&#39;,(s.height-430)/2].join(&#39;&#39;)))u.href=[f,p].join(&#39;&#39;);};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,&#39;&#39;,&#39;&#39;,&#39;http://cwb.assets.jianshu.io/notes/images/30725888/weibo/image_b5ea876170b6.jpg&#39;, &#39;我写了新文章《day03》（ 分享自 @简书 ）&#39;,&#39;https://www.jianshu.com/p/c8acb5470280?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=weibo&#39;,&#39;页面编码gb2312|utf-8默认gb2312&#39;));" data-original-title="分享到微博">
          <i class="iconfont ic-weibo"></i>
        </a>
          <a class="share-circle" data-toggle="tooltip" href="http://cwb.assets.jianshu.io/notes/images/30725888/weibo/image_b5ea876170b6.jpg" target="_blank" data-original-title="下载长微博图片">
            <i class="iconfont ic-picture"></i>
          </a>
        <a class="share-circle more-share" tabindex="0" data-toggle="popover" data-placement="top" data-html="true" data-trigger="focus" href="javascript:void(0);" data-content="
          &lt;ul class=&quot;share-list&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r=&#39;http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=&#39;+e(&#39;https://www.jianshu.com/p/c8acb5470280?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=qzone&#39;)+&#39;&amp;title=&#39;+e(&#39;我写了新文章《day03》&#39;),x=function(){if(!window.open(r,&#39;qzone&#39;,&#39;toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600&#39;))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;&gt;&lt;i class=&quot;social-icon-sprite social-icon-zone&quot;&gt;&lt;/i&gt;&lt;span&gt;分享到QQ空间&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r=&#39;https://twitter.com/share?url=&#39;+e(&#39;https://www.jianshu.com/p/c8acb5470280?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=twitter&#39;)+&#39;&amp;text=&#39;+e(&#39;我写了新文章《day03》（ 分享自 @jianshucom ）&#39;)+&#39;&amp;related=&#39;+e(&#39;jianshucom&#39;),x=function(){if(!window.open(r,&#39;twitter&#39;,&#39;toolbar=0,resizable=1,scrollbars=yes,status=1,width=600,height=600&#39;))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;&gt;&lt;i class=&quot;social-icon-sprite social-icon-twitter&quot;&gt;&lt;/i&gt;&lt;span&gt;分享到Twitter&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r=&#39;https://www.facebook.com/dialog/share?app_id=483126645039390&amp;display=popup&amp;href=https://www.jianshu.com/p/c8acb5470280?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=facebook&#39;,x=function(){if(!window.open(r,&#39;facebook&#39;,&#39;toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330&#39;))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;&gt;&lt;i class=&quot;social-icon-sprite social-icon-facebook&quot;&gt;&lt;/i&gt;&lt;span&gt;分享到Facebook&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,r=&#39;https://plus.google.com/share?url=&#39;+e(&#39;https://www.jianshu.com/p/c8acb5470280?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=google_plus&#39;),x=function(){if(!window.open(r,&#39;google_plus&#39;,&#39;toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330&#39;))location.href=r};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})();&quot;&gt;&lt;i class=&quot;social-icon-sprite social-icon-google&quot;&gt;&lt;/i&gt;&lt;span&gt;分享到Google+&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;javascript:void(function(){var d=document,e=encodeURIComponent,s1=window.getSelection,s2=d.getSelection,s3=d.selection,s=s1?s1():s2?s2():s3?s3.createRange().text:&#39;&#39;,r=&#39;http://www.douban.com/recommend/?url=&#39;+e(&#39;https://www.jianshu.com/p/c8acb5470280?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=reader_share&amp;utm_source=douban&#39;)+&#39;&amp;title=&#39;+e(&#39;day03&#39;)+&#39;&amp;sel=&#39;+e(s)+&#39;&amp;v=1&#39;,x=function(){if(!window.open(r,&#39;douban&#39;,&#39;toolbar=0,resizable=1,scrollbars=yes,status=1,width=450,height=330&#39;))location.href=r+&#39;&amp;r=1&#39;};if(/Firefox/.test(navigator.userAgent)){setTimeout(x,0)}else{x()}})()&quot;&gt;&lt;i class=&quot;social-icon-sprite social-icon-douban&quot;&gt;&lt;/i&gt;&lt;span&gt;分享到豆瓣&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        " data-original-title="" title="">更多分享</a>
      </div>
    </div>
    <div id="vue_comment"></div>
  </div>

  <div class="vue-side-tool" props-data-props-show-qr-code="0"></div>
</div>
<div class="note-bottom">
  <div><div class="main"><div class="title">被以下专题收入，发现更多相似内容</div> <a class="collection-settings"><i class="iconfont ic-settings-account"></i><span>投稿管理</span></a> <div class="include-collection"><div class="modal-wrap add-collection-wrap"><a class="add-collection"><i class="iconfont ic-follow"></i>收入我的专题</a></div>  <!----></div></div> <!----> <!----></div>
  <div data-vcomp="recommended-notes" data-note-id="30725888"></div>
  <!-- 相关文章 -->
  <div class="seo-recommended-notes">

        <div class="note ">
                    <a class="title" target="_blank" href="https://www.jianshu.com/p/340d80dfa62e?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">HTML+CSS(47-72)</a>
          <p class="description">问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 {margin...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/0daaf5262534?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/20957ee0-8e93-409a-acb9-9d74ee5ead73" alt="48">
            </div>
            <span class="name">_Yfling</span>
</a>        </div>

        <div class="note ">
                    <a class="title" target="_blank" href="https://www.jianshu.com/p/7fa9a36fa5e4?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">h5常见的面试题</a>
          <p class="description">第一部分 HTML&amp;CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HTML5推出的设计目的，以及现在市场的使用情况，浏览器支持情况等。。。。 设计目的 HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/3a98398d2482?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/bd59c431-0db9-486f-a95f-252bf5e8b849.jpg" alt="48">
            </div>
            <span class="name">kismetajun</span>
</a>        </div>

        <div class="note ">
                    <a class="title" target="_blank" href="https://www.jianshu.com/p/2869413461e1?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">day03</a>
          <p class="description">盒子模型 margin:10px 20px 30px 40px分别对应为上右下左padding：10px 20px 30px 40px分别对应为上右下左 HTML标签的分类 块标签 特点：1.独占一行 2.能够设置宽高 内联标签 特点：1.并排显示 2.不能设置宽高 3.不...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/db9af199ad16?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/7-0993d41a595d6ab6ef17b19496eb2f21.jpg" alt="48">
            </div>
            <span class="name">陈小婷c</span>
</a>        </div>

        <div class="note have-img">
          <a class="cover" target="_blank" href="https://www.jianshu.com/p/09babc49ff95?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <img src="./day03 - 简书_files/13085886-917b941c2bd0b8dd.PNG" alt="240">
</a>          <a class="title" target="_blank" href="https://www.jianshu.com/p/09babc49ff95?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">DAY03</a>
          <p class="description">2018.07.11学习总结 1.盒子模型margin,padding的传参 1.1margin的传参 1.2padding的传参 同理，padding也是这样的顺序 2.HTML标签的分类及特点 2.1块标签  div,h1~h6,p,ul,li,dl,dt,dd1.独占...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/c20e91f310df?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/2-9636b13945b9ccf345bc98d0d81074eb.jpg" alt="48">
            </div>
            <span class="name">墨雅丫</span>
</a>        </div>

        <div class="note ">
                    <a class="title" target="_blank" href="https://www.jianshu.com/p/37c24d1da804?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">Day03</a>
          <p class="description">一.css样式中的属性 1.1.盒子模型的传参 margin传递的参数：1——传递两个参数，先上下后左右；2——传递三个参数，先上，左右，后下；3——传递四个参数，先上，再右，再下，后左； 1.2.padding的传参 padding 传递一个参数，四面都被改变传递两个参数...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/a1fbd16bcfde?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/15-a7ac401939dd4df837e3bbf82abaa2a8.jpg" alt="48">
            </div>
            <span class="name">雪落殇晨</span>
</a>        </div>

        <div class="note have-img">
          <a class="cover" target="_blank" href="https://www.jianshu.com/p/c0a4033881d3?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <img src="./day03 - 简书_files/3371332-a3c38821cbd2d71d.jpg" alt="240">
</a>          <a class="title" target="_blank" href="https://www.jianshu.com/p/c0a4033881d3?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">诗 | 昨晚做了一个梦</a>
          <p class="description">文 | 二静 昨晚做了一个梦 一切都发生在考场上 这一场考语文了 我却在考场迷迷糊糊 我做了一个梦 梦到自己在考场上做了一个梦 醒来只有写作文的时间了 我写了刚才做的那个梦 我是二静，愿你在每个22：22想起我。</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/76440266be59?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/57c3feb21a1d" alt="48">
            </div>
            <span class="name">二静不二</span>
</a>        </div>

        <div class="note ">
                    <a class="title" target="_blank" href="https://www.jianshu.com/p/7155dfa3d7a4?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">日精进打卡第82天</a>
          <p class="description">姓名:谢新葵 公司：宁波大发化纤有限公司 宁波盛和塾《六项精进》第235期学员感谢二组 【日精进打卡第82天】 知～学习 诵读《六项精进》大纲0遍，通篇0遍 《大学》1遍。 《谁将主导--世界货币》第二部分 【经典名句分享】 少壮不努力 老大徒伤悲 知人者智，自知者明。 【...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/416ad4cd4fee?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/2a2507f0-a2a1-4599-828c-723b33baee10" alt="48">
            </div>
            <span class="name">sandy201704</span>
</a>        </div>

        <div class="note have-img">
          <a class="cover" target="_blank" href="https://www.jianshu.com/p/3bb2b80bda06?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <img src="./day03 - 简书_files/10221380-309729ceb5e15e0f.jpg" alt="240">
</a>          <a class="title" target="_blank" href="https://www.jianshu.com/p/3bb2b80bda06?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">华北区JFM乡村教师交流群第二次分享会有感</a>
          <p class="description">5月12日我们华北区第一次成功的分享后，我们管委会的成员又马上思考下一期由谁来分享。我们结合第一次分享会时大家的表现、目前老师感兴趣的话题、分享人的经验等方面，觉得来自内蒙古的胡老师比较适合，因为胡老师已经开展了性教育课程，她肯定有一定的经验，再者这个课程是老师既爱又怕的课...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/059260bd4d1e?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/1e24ca1c-be8d-430f-a217-792ea007c9d2.jpg" alt="48">
            </div>
            <span class="name">乡村教师梁东青</span>
</a>        </div>

        <div class="note have-img">
          <a class="cover" target="_blank" href="https://www.jianshu.com/p/cc80b10cfaac?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <img src="./day03 - 简书_files/5859012-e29503563a3ee546.jpg" alt="240">
</a>          <a class="title" target="_blank" href="https://www.jianshu.com/p/cc80b10cfaac?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">遇到渣男快躲开！</a>
          <p class="description">     什么样的男人最讨厌？     自私、没上进心、安于现状、没出息、没骨气、没有责任心、没有绅士风度、啃老、不孝顺、爱嫉妒、劈腿、精神出轨……渣男，滚开！      最近在朋友的推荐下看了一部电视剧《人间至味是清欢》，很喜欢陈乔恩又不讨厌佟大为就果断追剧了，说实话，看...</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/c495f909e46c?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/89eae8ba-3f8c-455c-8ed2-024f402fd15f.jpg" alt="48">
            </div>
            <span class="name">亲爱的小鱼老师</span>
</a>        </div>

        <div class="note ">
                    <a class="title" target="_blank" href="https://www.jianshu.com/p/2e74f0a08826?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation">夏想</a>
          <p class="description">卧听春水戏蛙， 方知黄梅入夏。 恺异乡不知途， 几多离思牵挂。 2015年4月19日</p>
          <a class="author" target="_blank" href="https://www.jianshu.com/u/5bb22fddf90e?utm_campaign=maleskine&amp;utm_content=user&amp;utm_medium=seo_notes&amp;utm_source=recommendation">
            <div class="avatar">
              <img src="./day03 - 简书_files/542fda36-c601-49fa-b4d4-c42c913bab0e.jpg" alt="48">
            </div>
            <span class="name">小庶公子</span>
</a>        </div>
  </div>
</div>

    <script type="application/json" data-name="page-data">{"user_signed_in":true,"locale":"zh-CN","os":"windows","read_mode":"day","read_font":"font2","current_user":{"id":13085789,"nickname":"idiot_teresa","slug":"0f1d279d09ea","avatar":"http://upload.jianshu.io/users/upload_avatars/13085789/f972c103-8fb0-4712-9a42-ae633bb0521a","unread_counts":{"chats":0,"total":0},"has_editable_collection":false},"note_show":{"is_author":true,"is_following_author":false,"is_liked_note":false,"follow_state":3,"uuid":"366e05d7-8d2f-4135-8268-0808d1527875"},"note":{"id":30725888,"slug":"c8acb5470280","user_id":13085789,"notebook_id":27418724,"commentable":true,"likes_count":0,"views_count":0,"public_wordage":378,"comments_count":0,"featured_comments_count":0,"total_rewards_count":0,"is_author":true,"paid_type":"free","paid":false,"paid_content_accessible":false,"author":{"nickname":"idiot_teresa","total_wordage":556,"followers_count":1,"total_likes_count":1}}}</script>
    
    <script src="./day03 - 简书_files/babel-polyfill-e9c9b9785eb2c39c58e4.js.下载" crossorigin="anonymous"></script>
    <script src="./day03 - 简书_files/web-base-40bc0ac0301ce40926de.js.下载" crossorigin="anonymous"></script>
<script src="./day03 - 简书_files/web-af4f67905f8b5eff49f8.js.下载" crossorigin="anonymous"></script>
    
    <script src="./day03 - 简书_files/entry-407d201d8ae44051842c.js.下载" crossorigin="anonymous"></script>
    <script>
  (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
          bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      }
      else {
          bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
  })();
</script>

  

<!----><!----><div id="cli_dialog_div"></div></body></html>